

<script>
  export default {
    name: 'slotFilter',
    data () {
      return {
        renderControl: 400,
        interVal: ''
      }
    },
    render: function (h) {
      console.log('times', this.renderControl, this.$slots.default.length)
      let slots = this.$slots.default || []
      slots = slots.map((ele, index) => {
        if (index > this.renderControl) {
          ele = h('li', {'class': {optionItem: true}}, [])
        }
        return ele
      })
      return h(
        'div', {}, slots
      )
    },
    methods: {
      handler () {
        this.renderControl = 400
        this.interVal = window.setInterval(() => {
          this.renderControl += 200
          if (this.renderControl > this.$slots.default.length) {
            window.clearInterval(this.interVal)
          }
        }, 10)
      }
    },
    mounted () {
      this.handler()
    },
    beforeDestroy () {
      window.clearInterval(this.interVal)
    }
  }
</script>

<style scoped lang='stylus'>
</style>
